<template>
	<div class="profile-page">
		<div class="profile-header">
			<div class="profile-avatar">
				<div class="avatar-container">
					<a-avatar :size="80" :src="userInfo.avatar" class="avatar-img">
						{{ userInfo.username.charAt(0).toUpperCase() }}
					</a-avatar>
					<div class="avatar-status"></div>
				</div>
			</div>
			<div class="profile-info">
				<h1 class="profile-name">{{ userInfo.username }}</h1>
				<p class="profile-bio">{{ userInfo.bio }}</p>
				<div class="profile-meta">
					<span class="join-date">{{ formatJoinDate(userInfo.joinDate) }}</span>
					<span class="separator">•</span>
					<span class="user-id">ID: {{ userInfo.userId }}</span>
				</div>
			</div>
			<div class="profile-actions">
				<button @click="toggleEdit" class="edit-btn">
					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
						<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
						<path d="m18.5 2.5 a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
					</svg>
					编辑资料
				</button>
				<button @click="handleLogout" class="logout-btn">
					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
						<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
						<polyline points="16,17 21,12 16,7"/>
						<line x1="21" y1="12" x2="9" y2="12"/>
					</svg>
					退出登录
				</button>
			</div>
		</div>

		<!-- 编辑模式 -->
		<div v-if="editMode" class="edit-panel">
			<form @submit.prevent="saveProfile" class="edit-form">
				<div class="form-group">
					<label for="username">用户名</label>
					<input
						id="username"
						v-model="editForm.username"
						type="text"
						class="form-input"
						placeholder="请输入用户名"
						required
					/>
				</div>
				<div class="form-group">
					<label for="email">邮箱</label>
					<input
						id="email"
						v-model="editForm.email"
						type="email"
						class="form-input"
						placeholder="请输入邮箱地址"
						required
					/>
				</div>
				<div class="form-group">
					<label for="phone">手机号</label>
					<input
						id="phone"
						v-model="editForm.phone"
						type="tel"
						class="form-input"
						placeholder="请输入手机号"
					/>
				</div>
				<div class="form-group">
					<label for="bio">个人简介</label>
					<textarea
						id="bio"
						v-model="editForm.bio"
						class="form-textarea"
						placeholder="介绍一下你自己..."
						rows="3"
					></textarea>
				</div>
				<div class="form-actions">
					<button type="button" @click="cancelEdit" class="btn-secondary">取消</button>
					<button type="submit" :disabled="saveLoading" class="btn-primary">
						{{ saveLoading ? '保存中...' : '保存' }}
					</button>
				</div>
			</form>
		</div>

		<!-- 用户统计 -->
		<div class="profile-stats">
			<div class="stats-grid">
				<div class="stat-item">
					<div class="stat-icon">💬</div>
					<div class="stat-content">
						<div class="stat-number">{{ userStats.totalConversations }}</div>
						<div class="stat-label">对话次数</div>
					</div>
				</div>
				<div class="stat-item">
					<div class="stat-icon">📝</div>
					<div class="stat-content">
						<div class="stat-number">{{ userStats.totalMessages }}</div>
						<div class="stat-label">发送消息</div>
					</div>
				</div>
				<div class="stat-item">
					<div class="stat-icon">❤️</div>
					<div class="stat-content">
						<div class="stat-number">{{ userStats.favoriteRoles }}</div>
						<div class="stat-label">收藏角色</div>
					</div>
				</div>
				<div class="stat-item">
					<div class="stat-icon">🎭</div>
					<div class="stat-content">
						<div class="stat-number">{{ userStats.createdRoles }}</div>
						<div class="stat-label">创建角色</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 个人信息卡片 -->
		<div class="info-card">
			<h3 class="card-title">个人信息</h3>
			<div class="info-list">
				<div class="info-item">
					<span class="info-label">用户名</span>
					<span class="info-value">{{ userInfo.username }}</span>
				</div>
				<div class="info-item">
					<span class="info-label">邮箱</span>
					<span class="info-value">{{ userInfo.email }}</span>
				</div>
				<div class="info-item">
					<span class="info-label">手机号</span>
					<span class="info-value">{{ userInfo.phone || '未绑定' }}</span>
				</div>
				<div class="info-item">
					<span class="info-label">注册时间</span>
					<span class="info-value">{{ formatDate(userInfo.joinDate) }}</span>
				</div>
				<div class="info-item">
					<span class="info-label">上次登录</span>
					<span class="info-value">{{ formatDate(userInfo.lastLogin) }}</span>
				</div>
			</div>
		</div>

		<!-- 退出登录确认模态框 -->
		<div v-if="showLogoutModal" class="modal-overlay" @click="closeLogoutModal">
			<div class="modal-content" @click.stop>
				<div class="modal-header">
					<h3>确认退出</h3>
					<button @click="closeLogoutModal" class="modal-close">
						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
							<line x1="18" y1="6" x2="6" y2="18"/>
							<line x1="6" y1="6" x2="18" y2="18"/>
						</svg>
					</button>
				</div>
				<div class="modal-body">
					<p>您确定要退出登录吗？</p>
				</div>
				<div class="modal-footer">
					<button @click="closeLogoutModal" class="btn-secondary">取消</button>
					<button @click="confirmLogout" :disabled="logoutLoading" class="btn-danger">
						{{ logoutLoading ? '退出中...' : '确认退出' }}
					</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message, Avatar } from 'ant-design-vue'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()

// 获取用户信息
const userInfo = computed(() => authStore.userInfo || {
	userId: 'N/A',
	username: '未知用户',
	email: 'unknown@example.com',
	phone: '',
	avatar: '', // 使用空字符串，让 Ant Design Avatar 显示占位符
	bio: '这个人很懒，什么都没留下。',
	joinDate: new Date().toISOString(),
	lastLogin: new Date().toISOString(),
})

// 用户统计数据
const userStats = reactive({
	totalConversations: 156,
	totalMessages: 3420,
	favoriteRoles: 23,
	createdRoles: 8,
})

// 编辑相关状态
const editMode = ref(false)
const saveLoading = ref(false)
const logoutLoading = ref(false)
const showLogoutModal = ref(false)

// 编辑表单
const editForm = reactive({
	username: '',
	email: '',
	phone: '',
	bio: '',
})

// 切换编辑模式
const toggleEdit = () => {
	editMode.value = !editMode.value
	if (editMode.value) {
		// 填充编辑表单
		editForm.username = userInfo.value.username || ''
		editForm.email = userInfo.value.email || ''
		editForm.phone = userInfo.value.phone || ''
		editForm.bio = userInfo.value.bio || ''
	}
}

// 取消编辑
const cancelEdit = () => {
	editMode.value = false
}

// 保存个人资料
const saveProfile = async () => {
	saveLoading.value = true
	try {
		// 模拟API调用
		await new Promise(resolve => setTimeout(resolve, 1000))

		// 更新用户信息
		authStore.updateUserInfo(editForm)

		message.success('个人资料更新成功！')
		editMode.value = false
	} catch (error) {
		message.error('保存失败，请稍后重试')
	} finally {
		saveLoading.value = false
	}
}

// 处理退出登录
const handleLogout = () => {
	showLogoutModal.value = true
}

// 关闭退出登录模态框
const closeLogoutModal = () => {
	showLogoutModal.value = false
}

// 确认退出登录
const confirmLogout = async () => {
	logoutLoading.value = true
	try {
		await authStore.logout()
		message.success('已成功退出登录')
		router.push('/login')
	} catch (error) {
		message.error('退出登录失败，请稍后重试')
	} finally {
		logoutLoading.value = false
		showLogoutModal.value = false
	}
}

// 格式化日期
const formatDate = (dateString) => {
	if (!dateString) return '未知'
	try {
		return new Date(dateString).toLocaleString('zh-CN', {
			year: 'numeric',
			month: '2-digit',
			day: '2-digit',
			hour: '2-digit',
			minute: '2-digit'
		})
	} catch {
		return '未知'
	}
}

// 格式化加入日期
const formatJoinDate = (dateString) => {
	if (!dateString) return '未知时间加入'
	try {
		return new Date(dateString).toLocaleDateString('zh-CN', {
			year: 'numeric',
			month: 'long'
		}) + '加入'
	} catch {
		return '未知时间加入'
	}
}

onMounted(() => {
	console.log('个人中心页面加载完成')
})
</script>

<style lang="scss" scoped>
.profile-page {
	max-width: 800px;
	margin: 0 auto;
	padding: 24px;
}

// 个人资料头部
.profile-header {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 32px;

	@media (max-width: 768px) {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 16px;
	}
}

.profile-avatar {
	.avatar-container {
		position: relative;
		width: 80px;
		height: 80px;

		.avatar-img {
			border: 3px solid #f0f2f5;
		}

		.avatar-status {
			position: absolute;
			bottom: 4px;
			right: 4px;
			width: 16px;
			height: 16px;
			background: #52c41a;
			border: 2px solid white;
			border-radius: 50%;
		}
	}
}

.profile-info {
	flex: 1;

	.profile-name {
		font-size: 28px;
		font-weight: 600;
		color: #1f2937;
		margin: 0 0 8px 0;
	}

	.profile-bio {
		font-size: 16px;
		color: #6b7280;
		margin: 0 0 12px 0;
		line-height: 1.5;
	}

	.profile-meta {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		color: #9ca3af;

		.separator {
			color: #d1d5db;
		}

		@media (max-width: 768px) {
			justify-content: center;
		}
	}
}

.profile-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;

	@media (max-width: 768px) {
		flex-direction: row;
		justify-content: center;
	}
}

.edit-btn, .logout-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;

	&:focus {
		outline: none;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	}
}

.edit-btn {
	background: #f3f4f6;
	color: #374151;

	&:hover {
		background: #e5e7eb;
	}
}

.logout-btn {
	background: #fee2e2;
	color: #dc2626;

	&:hover {
		background: #fecaca;
	}
}

// 编辑面板
.edit-panel {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 32px;
}

.edit-form {
	.form-group {
		margin-bottom: 20px;

		label {
			display: block;
			font-size: 14px;
			font-weight: 500;
			color: #374151;
			margin-bottom: 6px;
		}

		.form-input, .form-textarea {
			width: 100%;
			padding: 12px 16px;
			border: 1px solid #d1d5db;
			border-radius: 8px;
			font-size: 14px;
			transition: border-color 0.2s ease;

			&:focus {
				outline: none;
				border-color: #3b82f6;
				box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
			}
		}

		.form-textarea {
			resize: vertical;
			min-height: 80px;
		}
	}

	.form-actions {
		display: flex;
		gap: 12px;
		justify-content: flex-end;
	}
}

.btn-primary, .btn-secondary, .btn-danger {
	padding: 10px 20px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;

	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	&:focus {
		outline: none;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	}
}

.btn-primary {
	background: #3b82f6;
	color: white;

	&:hover:not(:disabled) {
		background: #2563eb;
	}
}

.btn-secondary {
	background: #f3f4f6;
	color: #374151;

	&:hover {
		background: #e5e7eb;
	}
}

.btn-danger {
	background: #dc2626;
	color: white;

	&:hover:not(:disabled) {
		background: #b91c1c;
	}
}

// 统计数据
.profile-stats {
	margin-bottom: 32px;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	transition: transform 0.2s ease;

	&:hover {
		transform: translateY(-2px);
	}
}

.stat-icon {
	font-size: 24px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f4f6;
	border-radius: 50%;
}

.stat-content {
	.stat-number {
		font-size: 20px;
		font-weight: 600;
		color: #1f2937;
		line-height: 1;
	}

	.stat-label {
		font-size: 12px;
		color: #6b7280;
		margin-top: 2px;
	}
}

// 信息卡片
.info-card {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 32px;
}

.card-title {
	font-size: 18px;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 20px 0;
}

.info-list {
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f3f4f6;

		&:last-child {
			border-bottom: none;
		}

		.info-label {
			font-size: 14px;
			color: #6b7280;
			font-weight: 500;
		}

		.info-value {
			font-size: 14px;
			color: #1f2937;
		}
	}
}

// 模态框
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 16px;
}

.modal-content {
	background: white;
	border-radius: 12px;
	width: 100%;
	max-width: 400px;
	overflow: hidden;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid #e5e7eb;

	h3 {
		font-size: 18px;
		font-weight: 600;
		color: #1f2937;
		margin: 0;
	}

	.modal-close {
		background: none;
		border: none;
		color: #6b7280;
		cursor: pointer;
		padding: 4px;
		border-radius: 4px;

		&:hover {
			background: #f3f4f6;
		}
	}
}

.modal-body {
	padding: 20px 24px;

	p {
		font-size: 14px;
		color: #6b7280;
		margin: 0;
	}
}

.modal-footer {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	padding: 20px 24px;
	background: #f9fafb;
}

// 响应式设计
@media (max-width: 768px) {
	.profile-page {
		padding: 16px;
	}

	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.info-item {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 4px;
	}

	.modal-content {
		margin: 16px;
	}

	.form-actions {
		justify-content: stretch !important;

		button {
			flex: 1;
		}
	}
}

@media (max-width: 480px) {
	.stats-grid {
		grid-template-columns: 1fr;
	}

	.profile-actions {
		width: 100%;

		button {
			flex: 1;
		}
	}
}
</style>